<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>部门管理</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/layui_v2/css/layui.css" media="all"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/font-awesome/css/font-awesome.min.css">
</head>
<body>
<blockquote class="layui-elem-quote">
    <%--添加部门按钮--%>
    <button id="add_dept_btn" class="layui-btn layui-btn-radius"><i class="layui-icon">&#xe61f;</i>添加</button>

    <button id="export_depts" class="layui-btn layui-btn-radius"><i class="fa fa-reply" aria-hidden="true"></i> 导出
    </button>
</blockquote>
<!-- 表格 -->
<table id="test" class="layui-table" lay-filter="dept_table"></table>


<script src="${pageContext.request.contextPath}/layui/layui_v2/layui.js"></script>
<script>
    layui.use(['element', 'table', 'jquery', 'layer', 'form'], function () {
            var $ = layui.jquery,
                table = layui.table,
                element = layui.element,
                layer = layui.layer,
                form = layui.form;

            var width = $(document.body).width();
            if (width < 500) {
                width = 500
            }

            //设置表头
            var clos = [[{
                field: "id", title: '部门编号', width: (width * 0.1), sort: true, align: 'center'
            }, {
                field: 'name', title: '部门名称', width: (width * 0.20), align: 'center'
            }, {
                field: 'remark', title: '部门备注', width: (width * 0.20), align: 'center'
            }, {
                title: '修改', width: (width * 0.25), toolbar: '#barEdit', align: 'center'
            }, {
                title: '撤销部门', width: (width * 0.24), toolbar: '#barDel', align: 'center'
            }]];

            //方法级别渲染表格
            var tableIns = table.render({
                elem: '#test'
                , height: 'auto'
                , cols: clos
                , url: '${pageContext.request.contextPath}/deptAction_pageQuery.action?is=1'
                , page: true
                , limits: [10, 20, 30, 50]
                , limit: 10
            });


            //监听排序切换
            table.on('sort(dept_table)', function (obj) {
                //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，如：
                tableIns.reload({
                    initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
                    , where: { //请求参数
                        field: obj.field //排序字段
                        , order: obj.type //排序方式
                    }
                });
            });


            //监听工具条
            table.on('tool(dept_table)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                if (layEvent === 'del') { //删除
                    //如果有未交接的员工则无法删除 已完成
                    $.post('${pageContext.request.contextPath}/deptAction_checkCanDeleted.action', {id: data.id},
                        function (result) {
//                            layer.alert(result.msg + " " + result.list);
                            if (result.msg === 'true') {
                                //可以删除
                                del_dept(obj);
                            } else {
                                //不能删除
                                var info = '该部门下有以下员工存在未交接的客户!<br>' +
                                    '<a style="color: red">[' + result.list + ']</a>' +
                                    '<br>请先完成客户的交接工作!!';
                                layer.alert(info, {title: '撤销失败'});
                            }
                        }
                    );


                } else if (layEvent === 'edit') { //编辑
                    //do something
                    edit_dept(data);

                }
            });

            //撤销部门
            function del_dept(obj) {
                var data = obj.data;

                var info = '此操会导致该部门下所有员工离职！<br />确定要撤销 <a style="color: red">' + data.name + '</a> 吗？';

                layer.confirm(info, {icon: 3, title: '撤销部门'}, function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                    $.post('${pageContext.request.contextPath}/deptAction_delete.action', {id: data.id},
                        function (result) {
                            if (result.trim() == 'success') {
                                layer.msg('撤销成功');
                                //重新加载数据
                                tableIns.reload();
                            } else {
                                layer.msg('撤销失败');
                            }

                        });
                });
            }

            //修改部门
            function edit_dept(data) {
                layer.open({
                    type: 2,
                    title: '修改部门',
                    area: ['450px', '300px'],
                    content: '${pageContext.request.contextPath}/deptAction_getDeptBeforeUpdate.action?id=' + data.id,
                    cancel: function (index, layero) {
                        $.post('${pageContext.request.contextPath}/deptAction_cleanDept.action', {}, function () {

                        });
                        layer.close(index);
                        return false;
                    }
                });
            }

            //添加部门按钮
            $("#add_dept_btn").click(function () {
                layer.open({
                    type: 2,
                    title: '添加部门',
                    area: ['450px', '300px'],
                    shadeClose: true,
                    content: '${pageContext.request.contextPath}/pages_dept_addDept.action'
                });
            });

            //导出按钮
            $("#export_depts").click(function () {

                layer.confirm('确认导出所有部门？', {icon: 3, title: '导出'}, function (index) {
                    layer.close(index);
                    location.href = '${pageContext.request.contextPath}/deptAction_exportDepts.action';

                });

            });

        }
    );


</script>
<%--工具栏设定,当id为0,就是管理规划部时，无法操作--%>
<script type="text/html" id="barEdit">
    {{#  if(d.id === 0){ }}
    <a class="layui-btn layui-btn-mini layui-btn-disabled"><i class="fa fa-pencil-square-o"
                                                              aria-hidden="true"></i>编辑</a>
    {{#  } else { }}
    <a class="layui-btn layui-btn-mini" lay-event="edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>编辑</a>
    {{#  } }}

</script>
<script type="text/html" id="barDel">

    {{#  if(d.id === 0){ }}
    <a class="layui-btn layui-btn-mini layui-btn-disabled"><i class="fa fa-reply" aria-hidden="true"></i>撤销</a>
    {{#  } else { }}
    <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del"><i class="fa fa-reply" aria-hidden="true"></i>撤销</a>
    {{#  } }}

</script>
</body>
</html>
